<template>
  <div class="box">
      <div class="info">
			<div class="info-header">
                <div class="left fl">
                    <img src="../../assets/images/hospital.png" />
                </div>
				<div class="right fl">
                    <span class="hosName">{{list2.yymc}}</span>
                </div>
				
			</div>
			<div class="userInfo">
				<div class="userInfo-block">姓名：<span class="userName">{{nameAndAge.xm}}</span></div>
				<div class="userInfo-block">性别：<span class="userSex">{{nameAndAge.xb}}</span></div>
				<div class="userInfo-block">年龄：<span class="userAge">{{list2.brnl}}</span></div>
				<div class="userInfo-block">就诊流水号：<span class="number">{{list2.jzlsh}}</span></div>
				<div class="userInfo-block">科室：<span class="object">{{list2.sqks}}</span></div>
				<div class="userInfo-block">标本名称：<span class="specimenName">{{list2.bbmc}}</span></div>
			</div>
		</div>
		﻿<div class="project">
			<div class="project-top">
				<div class="project-top-left fl">
					<img class="project-top-image" src="../../assets/images/icon.png" />
					<span class="gray">报告名称</span>
					<span class="project-name">{{list2.bgdlbmc}}</span>
				</div>
				<div class="project-top-right fr">
					<span class="project-type">{{list2.bgdlbmc}}</span>
				</div>
			</div>
			<table class="yj-project">
				<tr style="color: #2359ab;">
					<td>项目</td>
					<td>结果</td>
					<td>参考值</td>
				</tr>
				<tr v-for="(item,i) in list22" :key="i">
					<td>{{item.mc}}</td>
					<td>
						{{item.jg}}
						<img v-show="item.ycts == '4'" class="project-icon" src="../../assets/images/down.png" />
						<img v-show="item.ycts == '3'" class="project-icon" src="../../assets/images/up.png" />
					</td>
					<td>{{item.ckz}}</td>
					<!-- <td>异常提示</td> -->
				</tr>
			</table>
		</div>
		<div class="prompt">
			<p><span style="color: red;">报告备注：</span>此结果只对该标本负责</p>
			<p><span style="color: red;">注：</span>网站打印的检查报告不能作为绝对依据</p>
		</div>
		<!-- <div class="footer" @click="toUrl">
			<button class="btn">报告解读</button>
		</div> -->
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
  </div>
</template>

<script>
import tips from '@/components/tips.vue'
import { getLISIndicatorsApi} from '@/api/healthRecords'
import {Indicator} from 'mint-ui'
export default {
    name: 'JYDETAIl',
    data () {
        return {
            reportId:'',
            detailData:{},
            list22:[],//有用的
            ksName:'',
            hosName:JSON.parse(localStorage.getItem('mzjbxx')).yymc,//医院名称
            nameAndAge:JSON.parse(localStorage.getItem('jbxx')),
			list2:JSON.parse(localStorage.getItem('mzjbxx')),
        	MzParamters:{"yljgdm":"","bgdh":"","bgrq":""}//Y0041800100/8493759/20190124
        }
    },
    filters:{

        filterTime:val=>{
            if(val){
                return val.replace('T',' ')
            }
            
        },
        filterAge:val=>{
            if(val){
                return new Date().getFullYear() - new Date(val).getFullYear()
            }
        }
    },
    methods:{
        init() {
            this.MzParamters.yljgdm = JSON.parse(localStorage.getItem('mzjbxx')).yljgdm;
            this.MzParamters.bgdh = JSON.parse(localStorage.getItem('mzjbxx')).bgdh;
            this.MzParamters.bgrq = JSON.parse(localStorage.getItem('mzjbxx')).bgrq;
        },
        // 1.2.5 门诊检验报告信息getLISIndicators
        getLISIndicators() {
            Indicator.open();
            getLISIndicatorsApi(JSON.stringify(this.MzParamters)).then(response => {
                if (response.data.code == 1) {
                    response.data.data.forEach(item => {
                        item.isShow = false;
                    });
                    this.list22 = response.data.data
                    Indicator.close();
                }
            })
        }
    },
    components:{
        tips
    },
    created(){
        this.init();
        this.getLISIndicators();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
	.info{background-color: #fff; min-height: 3rem;padding:1em 1.3rem;}
    .info-header{ position: relative;border-bottom:#2EBFF4 dashed 1px;
    overflow: hidden;
    padding-bottom: 1rem;
        .left{
            width: 2.5rem;
            height: 2.5rem;;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 1rem;
            img{
                width:100%;
                height: 100%;
            }
        }
        .right{
            width: 18rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 2.5rem;
        }
    }
    
    .hosImg{width: 100%;vertical-align: middle;}
    .hosName{color: #000;font-size: 1.3rem;}
    .userInfo{width: 100%;display: flex;flex-wrap: wrap;padding: 1rem;color: #919191;font-size: 1rem;}
    .userInfo-block{display: block;width: 50%;}
    /* .userInfo-block:nth-last-child(2),.userInfo-block:nth-last-child(1){width: 100%;} */
    .userInfo-block span{color: #000;}
    .project{background-color: #fff;margin-top: 1rem;padding: 1rem;}
    .project-top{overflow: hidden;}
    .project-top-image{width: 1.5rem;height: 1.5rem;vertical-align: middle;}
    .project-top-left span{vertical-align: middle;}
    .gray{color: #9c9c9c;}
    .project-name{color: #333;}
    /* .project-type{color: #2d83ff;display: block;background-color: rgb(224,236,255);border-radius: 1rem;min-width: 8rem;text-align: center;} */
    .project-type{color: #ff9027;display: block;border-radius: 1rem;min-width: 8rem;text-align: center;border:#ff9027 solid 1px;padding:0 0.5rem;display: inline-block;}
    .yj-project{width: 100%;background-color: #f6fbfc;margin-top: 1rem;}
    .yj-project td{padding: 0.5rem;border: 1px solid #64b2e1;border-collapse: collapse;text-align: center;vertical-align: middle;}
    .project-icon{width: 1rem;display: inline-block;vertical-align: middle;}
    .xj-list{background-color: #fff;text-align: center;border: 1px solid #ddd;margin-top: 1rem;border-top:0px}
    .xj-list>div{display: flex;}
    .xj-list span{display: block;padding: 0.5rem 0;width: 100%;}
    .xj-list-top{background-color: #0095ff;color: #EFEFF4;border-top-left-radius: 1rem;border-top-right-radius: 1rem;}
    .xjmc,.result{color: #fff;}
    .prompt{padding: 1rem;margin-bottom: 2rem;}
    .footer{width: 100%;position: fixed;bottom: 0;left: 0;text-align: center;}
    .btn{border: 0;background-color: #0CB7F5;width: 95%;margin:2rem auto;color: #fff;line-height: 3rem;border-radius: 2rem;}
</style>
 